<template>
    <div class="personInfo">
        <el-card >
            <el-form>
                <el-form-item>
                    <el-upload class="avatar-uploader" action="http://localhost:8080/file/upload"
                        :show-file-list="false" :on-success="handleAvatarSuccess">
                        <img v-if="user.avatar" :src="user.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="姓名" style="font-weight: bold;width: 60%;margin: 0 auto;" >
                    <el-input type="text" v-model="user.name" />
                </el-form-item>
                <el-form-item label="账号" style="font-weight: bold;width: 60%;margin: 0 auto;" >
                    <el-input disabled type="text" v-model="user.username" />
                </el-form-item>
                <el-form-item label="权限" style="font-weight: bold;width: 60%;margin: 0 auto;" >
                    <el-input disabled type="text" v-model="user.role" />
                </el-form-item>
                <el-form-item>
                    <el-button @click="save" style="margin: auto;" type="primary">保存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { updateOne } from '../../api';
export default {
    data() {
        return {
            user: JSON.parse(JSON.stringify(this.$store.getters.getUser)),
            updateUser:JSON.parse(JSON.stringify(this.$store.getters.getUser))
        }
    },
    created() {
        if(this.user.role==="admin"){
            this.user.role = "管理员"
        }else{
            this.user.role = "商家"
        }
        console.log(this.$store.state.user);
    },
    methods: {
        handleAvatarSuccess(response) {
            console.log(response);
            this.user.avatar = response.data;
        },
        save(){
            this.updateUser.avatar = this.user.avatar;
            this.updateUser.name = this.user.name;
            console.log(this.updateUser.role);
            updateOne(this.updateUser.role,this.updateUser).then(res=>{
                if(res.code===200){
                    this.$message.success(res.message)
                    console.log(this.updateUser);
                    localStorage.removeItem("user");
                    localStorage.setItem("user",JSON.stringify(this.updateUser))
                    this.$store.commit("saveUser",this.updateUser)
                }else{
                    this.$message.error(res.message)
                }
            })
        }
    },
}

</script>

<style scoped>
.el-form-item{
    padding-top: 20px;
}
/* .personInfo {
    width: 60%;
    height: 100%;
} */

.el-card__body {
    width: 100%;
    height: 85vh;
}

.avatar-uploader .avatar {
    width: 30vh;
    height: 30vh;
    display: block;
}

.avatar-uploader {
    margin: 0 auto;
}

.avatar-uploader .el-upload {
    text-align: center;
    /* border: 1px dashed var(--el-border-color); */
    /*边框*/
    border: none;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>